<template>
  <BaseDialog
    ref="dialogRef"
    dialogTitle="分配菜单"
    @dialogSubmit="dialogSubmit"
    :dialogBodyStyle="{ height: '50vh', overflow: 'auto' }"
  >
    <template #dialog_body>
      <SysPermissionTree ref="treeRef" :showCheckbox="true" />
    </template>
  </BaseDialog>
</template>

<script lang="ts" setup>
import BaseDialog from '@/components/base/dialog/BaseDialogComponent.vue';
import SysPermissionTree from '@/components/auth/SysPermissionTreeComponent.vue';
import { defineExpose, defineProps, ref } from 'vue';
import type { Role } from '@/types/interface/auth_interface';
import { ElMessage, ElTree } from 'element-plus';
import Request from '@/api/request/request';
import urls from '@/api/request/urls';
import type { ResponseData } from '@/types/interface/base_interface';

// 接收父组件传递过来的值
interface Props {
  // 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  loadTableList: () => void; // 重新加载表格
}
const props = defineProps<Props>();
const dialogRef = ref(); // 表单ref对象
// 定义树形菜单的ref对象
const treeRef = ref();
// 表单对象
const form = ref<Role>();
let formInit: Role; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，gong供父组件调用，传入表单对象
const openDialog = async (role: Role) => {
  formInit = { ...role }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = { ...role };
  // 打开对话框，先初始化树形菜单
  dialogRef.value!.openDialog();
  // 获取树形菜单初始值
  const responseData: ResponseData = await new Request(
    `${urls.API_URL_BACKSTAGE_ROLE_PERMISSION_MANAGE}/${form.value.id}`
  ).get();
  if (responseData.success) {
    // 设置该角色的菜单初始值
    treeRef.value!.setCheckedKeys(responseData.data);
  }
};
// 提交树形菜单数据
// 当点击对话框提交按钮
const dialogSubmit = async () => {
  // 将tree中包含半选中节点在内的菜单封装在一起
  // console.log('半选节点' + treeRef.value!.treeRef.value!.getHalfCheckedKeys());
  const formObject = {
    roleId: form.value!.id,
    permissionIds: [...treeRef.value!.getCheckedKeys(false)] // 20240828修改为false参数，即选中的节点，返回返回值包含半选中节点数据。例如目录1-》子目录1-3，如果子目录1-3勾选了，目录1的节点值也会返回
    // permissionIds: [...treeRef.value!.getCheckedKeys(true)] // 选中的节点，只返回子节点（即所有包含子节点的节点不会被获取）。例如目录1-》子目录1-3，如果子目录1-3勾选了，则只有子目录1-3的节点值，目录1的节点值不会返回
    // permissionIds: [...treeRef.value!.getCheckedKeys(), ...treeRef.value!.getHalfCheckedKeys()] // 将选中和版选中的节点进行合并
  };
  const resData: ResponseData = await new Request(
    urls.API_URL_BACKSTAGE_ROLE_PERMISSION_MANAGE,
    JSON.stringify(formObject)
  ).put();
  if (resData.success) {
    ElMessage.success('保存成功');
    // 刷新表格
    props.loadTableList();
    // 关闭窗口
    dialogRef.value.closeDialog();
  }
};
// 暴露组件给父容器使用
defineExpose({
  openDialog
});
</script>

<style scoped></style>
